<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta name="description" content="给文章添加评论大体上，博客的功能都已经完成了，现在再给文章详情页添加评论功能，之后再个点赞功能。 到后面如果有时间，再增加变为多人博客系统">
<meta property="og:type" content="article">
<meta property="og:title" content="blog（九）文章添加评论&amp;点赞">
<meta property="og:url" content="http://example.com/2021/04/17/blog%EF%BC%88%E4%B9%9D%EF%BC%89%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA-%E7%82%B9%E8%B5%9E/index.html">
<meta property="og:site_name" content="yyc&#39;s blog">
<meta property="og:description" content="给文章添加评论大体上，博客的功能都已经完成了，现在再给文章详情页添加评论功能，之后再个点赞功能。 到后面如果有时间，再增加变为多人博客系统">
<meta property="og:locale">
<meta property="og:image" content="https://gitee.com/goatyyc/giteep-page-imgs/raw/master/imgs/20210417221212.png">
<meta property="og:image" content="https://gitee.com/goatyyc/giteep-page-imgs/raw/master/imgs/20210417221242.png">
<meta property="article:published_time" content="2021-04-17T14:07:51.000Z">
<meta property="article:modified_time" content="2021-04-17T14:14:12.136Z">
<meta property="article:author" content="yyc">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/goatyyc/giteep-page-imgs/raw/master/imgs/20210417221212.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://example.com/2021/04/17/blog（九）文章添加评论-点赞/"/>





  <title>blog（九）文章添加评论&点赞 | yyc's blog</title>
  








<meta name="generator" content="Hexo 5.3.0"></head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta custom-logo">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">yyc's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">技术博客</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/04/17/blog%EF%BC%88%E4%B9%9D%EF%BC%89%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA-%E7%82%B9%E8%B5%9E/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="yyc's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">blog（九）文章添加评论&点赞</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2021-04-17T22:07:51+08:00">
                2021-04-17
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/springboot/" itemprop="url" rel="index">
                    <span itemprop="name">springboot</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="给文章添加评论"><a href="#给文章添加评论" class="headerlink" title="给文章添加评论"></a>给文章添加评论</h1><p>大体上，博客的功能都已经完成了，现在再给文章详情页添加评论功能，之后再个点赞功能。</p>
<p>到后面如果有时间，再增加变为多人博客系统</p>
<a id="more"></a>

<h2 id="文章详情页–前端"><a href="#文章详情页–前端" class="headerlink" title="文章详情页–前端"></a>文章详情页–前端</h2><p><img src="https://gitee.com/goatyyc/giteep-page-imgs/raw/master/imgs/20210417221212.png"></p>
<p>简单地展示页面，显示文章详情页面时，调用一个js函数load()请求该文章的评论并渲染到页面上</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">onload</span>=<span class="string">&quot;load()&quot;</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">&quot;comment()&quot;</span>&gt;</span>留言<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="handlebars"><span class="xml"><span class="comment">&lt;!--    评论区--&gt;</span></span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">load</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        $.ajax(&#123;</span></span><br><span class="line"><span class="javascript">            url: <span class="string">&#x27;/comment/getComment&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            data: &#123;<span class="attr">cid</span>: $(<span class="string">&#x27;#article_id&#x27;</span>).val()&#125;,</span></span><br><span class="line"><span class="javascript">            type: <span class="string">&#x27;post&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            success: <span class="function"><span class="keyword">function</span> (<span class="params">result</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">if</span>(result &amp;&amp; result.code==<span class="string">&#x27;success&#x27;</span>)&#123;</span></span><br><span class="line"><span class="javascript">                    <span class="built_in">console</span>.log(result);</span></span><br><span class="line"><span class="javascript">                    <span class="comment">// 数据渲染</span></span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> arr = result.data;</span></span><br><span class="line"><span class="javascript">                    <span class="built_in">console</span>.log(arr);</span></span><br><span class="line"><span class="javascript">                    $.each(arr, <span class="function"><span class="keyword">function</span> (<span class="params">i,t</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="keyword">var</span> str = <span class="string">&#x27;&lt;p&gt;&#x27;</span>+t.username+<span class="string">&#x27; : &#x27;</span>+<span class="string">&#x27;&lt;span&gt;&#x27;</span>+t.contents+<span class="string">&#x27;&lt;/span&gt;&#x27;</span>+<span class="string">&#x27;&lt;/p&gt;&#x27;</span>+<span class="string">&#x27;&lt;hr&gt;&#x27;</span>;</span></span><br><span class="line"><span class="javascript">                        $(<span class="string">&quot;.userContent&quot;</span>).append(str);</span></span><br><span class="line">                    &#125;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line"><span class="javascript">    <span class="comment">//当用户点击留言按钮时，调用comment()函数，成功插入数据后回调：清空评论区并重新渲染</span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">comment</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> article_id = $(<span class="string">&#x27;#article_id&#x27;</span>).val();</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> username = $(<span class="string">&#x27;#username&#x27;</span>).val();</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> comment = $(<span class="string">&#x27;#commentText&#x27;</span>).val();</span></span><br><span class="line"><span class="javascript">        $.post(&#123;</span></span><br><span class="line"><span class="javascript">            url: <span class="string">&#x27;/comment/commit&#x27;</span>,</span></span><br><span class="line">            data: &#123;</span><br><span class="line">                cid:article_id,</span><br><span class="line">                username: username,</span><br><span class="line">                comment: comment</span><br><span class="line">            &#125;,</span><br><span class="line"><span class="javascript">            success: <span class="function"><span class="keyword">function</span> (<span class="params">result</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="built_in">this</span>.data);</span></span><br><span class="line"><span class="javascript">                <span class="keyword">if</span>(result &amp;&amp; result.code==<span class="string">&#x27;success&#x27;</span>)&#123;</span></span><br><span class="line"><span class="javascript">                    alert(<span class="string">&quot;留言成功&quot;</span>);</span></span><br><span class="line"><span class="javascript">                    <span class="comment">// 清空commentContent,回调onload</span></span></span><br><span class="line"><span class="javascript">                    $(<span class="string">&#x27;.userContent&#x27;</span>).empty();</span></span><br><span class="line">                    load();</span><br><span class="line"><span class="javascript">                &#125;<span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">                    alert(<span class="string">&quot;参数非法&quot;</span>);</span></span><br><span class="line">                &#125;</span><br><span class="line"><span class="javascript">                <span class="comment">// 清空表单</span></span></span><br><span class="line"><span class="javascript">                $(<span class="string">&quot;#commentForm&quot;</span>)[<span class="number">0</span>].reset();</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h2 id="后台CRUD"><a href="#后台CRUD" class="headerlink" title="后台CRUD"></a>后台CRUD</h2><p>控制器：调用commentService.comment(commentPojo);</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">@PostMapping(&quot;&#x2F;commit&quot;)</span><br><span class="line">@ResponseBody</span><br><span class="line">public APIResponse comment(HttpServletRequest request, Integer cid, String username, String comment)&#123;</span><br><span class="line">    log.info(String.valueOf(cid));</span><br><span class="line">    log.info(username);</span><br><span class="line">    log.info(comment);</span><br><span class="line">    &#x2F;&#x2F;判断是否为空</span><br><span class="line">    if(!(StringUtils.hasLength(cid.toString()) &amp;&amp; StringUtils.hasLength(username) &amp;&amp; StringUtils.hasLength(comment)))&#123;</span><br><span class="line">        String msg &#x3D; &quot;参数不能为空&quot;;</span><br><span class="line">        return APIResponse.fail(msg);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    Comment commentPojo &#x3D; new Comment();</span><br><span class="line">    commentPojo.setCid(cid);</span><br><span class="line">    commentPojo.setUsername(username);</span><br><span class="line">    commentPojo.setContents(comment);</span><br><span class="line">    try&#123;</span><br><span class="line">        commentService.comment(commentPojo);</span><br><span class="line">    &#125; catch (Exception e) &#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">        return APIResponse.fail(&quot;留言失败&quot;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return APIResponse.success();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>还有查、删两个操作</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@PostMapping(&quot;/getComment&quot;)</span></span><br><span class="line"><span class="meta">@ResponseBody</span></span><br><span class="line"><span class="function"><span class="keyword">public</span> APIResponse <span class="title">getComment</span><span class="params">(Integer cid)</span></span>&#123;</span><br><span class="line">    List&lt;Comment&gt; comments = commentService.getComment(cid);</span><br><span class="line">    <span class="keyword">return</span> APIResponse.success(comments);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@PostMapping(&quot;/delComment&quot;)</span></span><br><span class="line"><span class="meta">@ResponseBody</span></span><br><span class="line"><span class="function"><span class="keyword">public</span> APIResponse <span class="title">deleteComment</span><span class="params">(Integer ccid)</span></span>&#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        commentService.deleteComment(ccid);</span><br><span class="line">    &#125; <span class="keyword">catch</span> (Exception e) &#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">        <span class="keyword">throw</span> BusinessException.withErrorCode(<span class="string">&quot;fail&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> APIResponse.success();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>完成时想到，删除文章时，也应该同时删除属于该文章的评论，</p>
<p>因此在文章service层要添加删除评论的业务</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ContentServiceImpl    </span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    @Transactional</span><br><span class="line">    @Override</span><br><span class="line">    @CacheEvict(value &#x3D; &#123;&quot;articleCache&quot;,&quot;articleCaches&quot;&#125;,allEntries &#x3D; true, beforeInvocation &#x3D; true)</span><br><span class="line">    public void deleteArticleById(Integer cid) &#123;</span><br><span class="line">        if(null &#x3D;&#x3D; cid)</span><br><span class="line">            throw BusinessException.withErrorCode(ErrorConstant.Common.PARAM_IS_EMPTY);</span><br><span class="line"></span><br><span class="line">        contentMapper.deleteArticleById(cid);</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F; 删除标签和分类关联</span><br><span class="line">        relationShipMapper.deleteRelationShipById(cid);</span><br><span class="line">        &#x2F;&#x2F; 删除相关评论</span><br><span class="line">        commentService.deleteArticleComment(cid);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>


<p>ok顺利完成</p>
<h1 id="给文章添加点赞功能"><a href="#给文章添加点赞功能" class="headerlink" title="给文章添加点赞功能"></a>给文章添加点赞功能</h1><p>一个用户对应一个ip，一个ip可以点赞一次，再次点击则取消。</p>
<p>文章表添加一个likes或者hits字段，用于记录点赞的数量</p>
<p>参考：<a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/145998195">https://zhuanlan.zhihu.com/p/145998195</a></p>
<p>先不考虑高并发的情况，用户规模小的情况下，如个人博客（一般默默无闻）</p>
<p>使用mysql实现：</p>
<p>为content文章表添加一个likes字段，用于存储点赞总数</p>
<p>新建一张表stars （id, ip, cid），同理如果要为评论添加点赞功能则建表comment_stars （id, ip, ccid）</p>
<h2 id="业务逻辑："><a href="#业务逻辑：" class="headerlink" title="业务逻辑："></a><strong>业务逻辑：</strong></h2><p>当用户点赞时，往stars数据表添加一条记录ip的记录，用户再次点击时，则查询数据库若ip存在，则删除次记录</p>
<h2 id="数据表："><a href="#数据表：" class="headerlink" title="数据表："></a>数据表：</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">CREATE TABLE IF NOT EXISTS &#96;stars&#96; (</span><br><span class="line">    &#96;sid&#96; INT UNSIGNED AUTO_INCREMENT,</span><br><span class="line">    &#96;ip&#96; VARCHAR (30) NOT NULL,</span><br><span class="line">	&#96;cid&#96; INT NOT NULL,</span><br><span class="line">    &#96;created&#96; INT,</span><br><span class="line">    PRIMARY KEY (&#96;sid&#96;)</span><br><span class="line">)ENGINE&#x3D;INNODB DEFAULT CHARSET&#x3D;utf8;</span><br></pre></td></tr></table></figure>


<h2 id="前端实现"><a href="#前端实现" class="headerlink" title="前端实现"></a>前端实现</h2><blockquote>
<p>思路：文章下方添加一个点赞的icon，用户点击一次则调用js函数，更换icon，并使记录数加一</p>
</blockquote>
<h3 id="获取客户端ip"><a href="#获取客户端ip" class="headerlink" title="获取客户端ip"></a>获取客户端ip</h3><p>引入搜狐接口，调用js函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;http://pv.sohu.com/cityjson?ie=utf-8&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取客户端外网ip</span></span><br><span class="line"><span class="built_in">console</span>.log(returnCitySN[<span class="string">&quot;cip&quot;</span>]);</span><br></pre></td></tr></table></figure>


<p>用户点击大拇指图表，调用thumbs_up()函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//发送post请求，传入ip和文章cid</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">thumbs_up</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//获取客户端外网ip</span></span><br><span class="line">        <span class="built_in">console</span>.log(returnCitySN[<span class="string">&quot;cip&quot;</span>]);</span><br><span class="line">        <span class="keyword">var</span> ip = returnCitySN[<span class="string">&quot;cip&quot;</span>];</span><br><span class="line">        <span class="keyword">var</span> cid = $(<span class="string">&#x27;#article_id&#x27;</span>).val();</span><br><span class="line">        <span class="comment">//点击改变颜色,ajax回调</span></span><br><span class="line">        $.ajax(&#123;</span><br><span class="line">            url: <span class="string">&quot;/stars/&quot;</span>,</span><br><span class="line">            data: &#123;<span class="attr">ip</span>:ip,<span class="attr">cid</span>:cid&#125;,</span><br><span class="line">            type: <span class="string">&quot;post&quot;</span>,</span><br><span class="line">            success: <span class="function"><span class="keyword">function</span> (<span class="params">result</span>)</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(result &amp;&amp; result.code==<span class="string">&#x27;success&#x27;</span>)&#123;</span><br><span class="line">                    <span class="built_in">console</span>.log(result);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>


<h2 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h2><p>业务逻辑：</p>
<p>1、控制器接收参数、校验参数</p>
<p>2、service层处理业务逻辑，检验是否已经存在该ip记录，若无则插入数据库</p>
<p>3、mapper写sql插入</p>
<p>遇到的第一个问题：点赞和取消点赞，如果每次操作都直接写入/删除数据库，比较影响性能</p>
<p>更适合使用redis做缓存，设置一定间隔时间，存入数据库（参考：<a target="_blank" rel="noopener" href="https://cloud.tencent.com/developer/article/1593444%EF%BC%89">https://cloud.tencent.com/developer/article/1593444）</a></p>
<p>先用mysql实现了点赞，和提醒已经点赞过的功能（不包含取消点赞）</p>
<h3 id="页面展示点赞数"><a href="#页面展示点赞数" class="headerlink" title="页面展示点赞数"></a>页面展示点赞数</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:id</span>=<span class="string">&quot;thumb&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;thumbs_up()&quot;</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;/site/images/like_black.png&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:id</span>=<span class="string">&quot;likesNum&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//展示点赞数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">show_likes</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $.ajax(&#123;</span><br><span class="line">        url: <span class="string">&quot;/stars/showLikes&quot;</span>,</span><br><span class="line">        data: &#123;<span class="attr">cid</span>:$(<span class="string">&#x27;#article_id&#x27;</span>).val()&#125;,</span><br><span class="line">        type: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">        success: <span class="function"><span class="keyword">function</span> (<span class="params">result</span>)</span>&#123;</span><br><span class="line">            <span class="comment">//显示点赞数</span></span><br><span class="line">            <span class="keyword">if</span>(result &amp;&amp; result.code==<span class="string">&#x27;success&#x27;</span>)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(result.data);</span><br><span class="line">                $(<span class="string">&#x27;#likesNum&#x27;</span>).html(result.data);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>前端调用后端接口，返回点赞总数</p>
<h3 id="后端统计点赞总数"><a href="#后端统计点赞总数" class="headerlink" title="后端统计点赞总数"></a>后端统计点赞总数</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//控制器</span></span><br><span class="line">    <span class="meta">@RequestMapping(&quot;/showLikes&quot;)</span></span><br><span class="line">    <span class="meta">@ResponseBody</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> APIResponse <span class="title">showLikes</span><span class="params">(Integer cid)</span></span>&#123;</span><br><span class="line">        <span class="keyword">int</span> num = starsService.queryLikesNumById(cid);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> APIResponse.success(num);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//服务层</span></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">queryLikesNumById</span><span class="params">(Integer cid)</span> </span>&#123;</span><br><span class="line">        <span class="comment">//查询传入cid文章的likes数量（注意：这里要设置数据库Likes字段初始默认值为0）</span></span><br><span class="line">        Content content = starsMapper.queryLikes(cid);</span><br><span class="line">        <span class="keyword">return</span> content.getLikes();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//mapper</span></span><br><span class="line">    &lt;select id=<span class="string">&quot;queryLikes&quot;</span> parameterType=<span class="string">&quot;Integer&quot;</span> resultType=<span class="string">&quot;com.learn.site.pojo.Content&quot;</span>&gt;</span><br><span class="line">        select * from contents as c</span><br><span class="line">        where c.cid=#&#123;cid&#125;</span><br><span class="line">    &lt;/select&gt;</span><br></pre></td></tr></table></figure>


<h3 id="页面点击点赞，点赞数-1"><a href="#页面点击点赞，点赞数-1" class="headerlink" title="页面点击点赞，点赞数+1"></a>页面点击点赞，点赞数+1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 点赞</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">thumbs_up</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//获取客户端外网ip</span></span><br><span class="line">    <span class="built_in">console</span>.log(returnCitySN[<span class="string">&quot;cip&quot;</span>]);</span><br><span class="line">    <span class="keyword">var</span> ip = returnCitySN[<span class="string">&quot;cip&quot;</span>];</span><br><span class="line">    <span class="keyword">var</span> cid = $(<span class="string">&#x27;#article_id&#x27;</span>).val();</span><br><span class="line">    <span class="comment">//点击改变颜色,ajax回调</span></span><br><span class="line">    $.ajax(&#123;</span><br><span class="line">        url: <span class="string">&quot;/stars/&quot;</span>,</span><br><span class="line">        data: &#123;<span class="attr">ip</span>:ip,<span class="attr">cid</span>:cid&#125;,</span><br><span class="line">        type: <span class="string">&quot;post&quot;</span>,</span><br><span class="line">        success: <span class="function"><span class="keyword">function</span> (<span class="params">result</span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(result);</span><br><span class="line">            <span class="built_in">console</span>.log(result.data);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(result &amp;&amp; result.code==<span class="string">&#x27;success&#x27;</span>)&#123;</span><br><span class="line">                <span class="comment">// console.log(result);</span></span><br><span class="line">                <span class="comment">// 图标变换，回调显示点赞数</span></span><br><span class="line">                show_likes();</span><br><span class="line">            &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">                alert(result.data || <span class="string">&quot;已经点赞过&quot;</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>点击大拇指，调用thumbs_up()函数，调用后端/stars接口，传入用户ip，文章cid</p>
<h3 id="后端入库，更新content表likes点赞数字段"><a href="#后端入库，更新content表likes点赞数字段" class="headerlink" title="后端入库，更新content表likes点赞数字段"></a>后端入库，更新content表likes点赞数字段</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;控制器</span><br><span class="line">    @RequestMapping(&quot;&quot;)</span><br><span class="line">    @ResponseBody</span><br><span class="line">    public APIResponse star(Integer cid, String ip)&#123;</span><br><span class="line"></span><br><span class="line">        int result &#x3D; starsService.addStarsById(cid, ip);</span><br><span class="line">        if(result&#x3D;&#x3D;1)&#123;</span><br><span class="line">            return APIResponse.success();</span><br><span class="line">        &#125;else &#123;</span><br><span class="line">            return APIResponse.fail(&quot;已经点赞过~&quot;);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#x2F;&#x2F;service</span><br><span class="line">    @Override</span><br><span class="line">    public int addStarsById(Integer cid, String ip) &#123;</span><br><span class="line">        &#x2F;&#x2F;判断是否已经点赞，通过cid,ip 查询</span><br><span class="line">        Stars stars &#x3D; new Stars();</span><br><span class="line">        stars.setCid(cid);</span><br><span class="line">        stars.setIp(ip);</span><br><span class="line">        &#x2F;&#x2F;已点过赞则提醒</span><br><span class="line">        if (isExist(stars))</span><br><span class="line">            return 0;</span><br><span class="line">        starsMapper.addStarsById(stars);</span><br><span class="line">        contentService.updateArticleLikesNum(cid);</span><br><span class="line">        return 1;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    &#x2F;**</span><br><span class="line">     * 判断该点赞记录是否存在</span><br><span class="line">     * @param stars</span><br><span class="line">     * @return</span><br><span class="line">     *&#x2F;</span><br><span class="line">    @Override</span><br><span class="line">    public Boolean isExist(Stars stars) &#123;</span><br><span class="line">        return starsMapper.isExist(stars);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#x2F;&#x2F;ContentServiceImpl</span><br><span class="line">    &#x2F;**</span><br><span class="line">     * 数据库likes字段值+1</span><br><span class="line">     *&#x2F;</span><br><span class="line">    @Override</span><br><span class="line">    public void updateArticleLikesNum(Integer cid) &#123;</span><br><span class="line">        contentMapper.updateArticleLikes(cid);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;xml的sql</span><br><span class="line">	&#x2F;&#x2F;添加记录</span><br><span class="line">    &lt;insert id&#x3D;&quot;addStarsById&quot; parameterType&#x3D;&quot;Stars&quot;  useGeneratedKeys&#x3D;&quot;true&quot; keyProperty&#x3D;&quot;sid&quot;&gt;</span><br><span class="line">        insert into &lt;include refid&#x3D;&quot;BASE_TABLE&quot;&gt;&lt;&#x2F;include&gt;</span><br><span class="line">        (ip,cid,created)</span><br><span class="line">        values (#&#123;ip&#125;,#&#123;cid&#125;,UNIX_TIMESTAMP(NOW()))</span><br><span class="line">    &lt;&#x2F;insert&gt;</span><br><span class="line"></span><br><span class="line">	&#x2F;&#x2F;更新点赞数</span><br><span class="line">    &lt;insert id&#x3D;&quot;updateArticleLikes&quot; parameterType&#x3D;&quot;INTEGER&quot;&gt;</span><br><span class="line">        update &lt;include refid&#x3D;&quot;BASE_TABLE&quot;&gt;&lt;&#x2F;include&gt;</span><br><span class="line">        set likes&#x3D;likes+1 where cid&#x3D;#&#123;cid&#125;</span><br><span class="line">    &lt;&#x2F;insert&gt;</span><br></pre></td></tr></table></figure>






<p><img src="https://gitee.com/goatyyc/giteep-page-imgs/raw/master/imgs/20210417221242.png"></p>
<p>完成效果如图，当点击大拇指时，数量加1，再次点击则提示已经点赞过</p>
<p>当前还未完善，以后有时间使用redis做缓存</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2021/04/14/springboot%E4%B8%AD%E4%BA%8B%E5%8A%A1%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="next" title="springboot中事务的使用">
                <i class="fa fa-chevron-left"></i> springboot中事务的使用
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2021/04/18/docker-%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0/" rel="prev" title="docker 基础学习">
                docker 基础学习 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/images/avatar.png"
                alt="" />
            
              <p class="site-author-name" itemprop="name"></p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
                <a href="/archives">
                  <span class="site-state-item-count">23</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">9</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%99%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA"><span class="nav-text">给文章添加评论</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%87%E7%AB%A0%E8%AF%A6%E6%83%85%E9%A1%B5%E2%80%93%E5%89%8D%E7%AB%AF"><span class="nav-text">文章详情页–前端</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8E%E5%8F%B0CRUD"><span class="nav-text">后台CRUD</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%99%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0%E7%82%B9%E8%B5%9E%E5%8A%9F%E8%83%BD"><span class="nav-text">给文章添加点赞功能</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%EF%BC%9A"><span class="nav-text">业务逻辑：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E8%A1%A8%EF%BC%9A"><span class="nav-text">数据表：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E5%AE%9E%E7%8E%B0"><span class="nav-text">前端实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%AE%A2%E6%88%B7%E7%AB%AFip"><span class="nav-text">获取客户端ip</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8E%E7%AB%AF"><span class="nav-text">后端</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA%E7%82%B9%E8%B5%9E%E6%95%B0"><span class="nav-text">页面展示点赞数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8E%E7%AB%AF%E7%BB%9F%E8%AE%A1%E7%82%B9%E8%B5%9E%E6%80%BB%E6%95%B0"><span class="nav-text">后端统计点赞总数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A1%B5%E9%9D%A2%E7%82%B9%E5%87%BB%E7%82%B9%E8%B5%9E%EF%BC%8C%E7%82%B9%E8%B5%9E%E6%95%B0-1"><span class="nav-text">页面点击点赞，点赞数+1</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8E%E7%AB%AF%E5%85%A5%E5%BA%93%EF%BC%8C%E6%9B%B4%E6%96%B0content%E8%A1%A8likes%E7%82%B9%E8%B5%9E%E6%95%B0%E5%AD%97%E6%AE%B5"><span class="nav-text">后端入库，更新content表likes点赞数字段</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">yyc</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
